<template>
  <div>
    <NavbarIndex msg="Welcome to Your Vue.js App" />
    <b-container>
      <router-link class="btn btn-danger mb-3" to="/linkadd">申请友情链接</router-link>
      <div class="card-columns">
        <div class="card" v-for="(items,index) in linkIndex" :key="items.id">
          <h5 class="card-header">{{getTypeTitleById(item.id)}}</h5>
          <div class="card-body">
            <a :href="item.url" target="_blank" class="btn btn-link" v-for="item in items" :key="item.id"> {{item.title}} </a>
          </div>
        </div>
      </div>
    </b-container>
    <Footer msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import Footer from "@/components/Footer.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "linkshow",
  components: {
    NavbarIndex,
    Footer
  },
  data () {
    return {};
  },
  created () {
    this['type/setList']()
    this['link/setIndex']()
    console.log(this.linkIndex)
    console.log('idid', this.getTitleById())
  },
  methods: {
    ...mapActions(['type/setList', 'link/setIndex']),
  },
  computed: {
    ...mapState({ typeList: state => state.type.list, linkIndex: state => state.link.index }),
    ...mapGetters('type', ['getTitleById'])
  }
};
</script>

<style scoped>
@media (min-width: 576px) {
  .card-columns {
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}
</style>

